<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>现代浏览器博物馆</title>    
    <link href="css/bootstrap.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
      body{
        padding-top: 50px;
        padding-bottom: 50px;
      }
      /*轮播图*/
      .carousel {
        height: 500px;
        background-color: #000;
        margin-bottom: 60px;
      }
      .carousel .item {
        height: 500px;
        background-color: #000;
      }
      .carousel .item img {
        width:100%;
        
      }
      .carousel-caption {
            z-index: 10;
        }

      .carousel-caption p {
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }
      .jianju{
         margin: 40px 0;

      }
      .tab-content .media-heading{
        font-size: 50px;
        color: #2a6496;
      }
      

     
    </style>
  </head>
  <body>
    <!--导航栏-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <!--小屏折叠按钮-->
          <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#mynavbar">
            <span class="sr-only">toggleCheck</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button> 
          <a class="navbar-brand" href="#">浏览器博物馆</a>          
        </div>
        <!--小屏折叠区域，大屏显示-->
        <div class="collapse navbar-collapse" id="mynavbar">
          <!--导航栏-->
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">综述</a></li>
            <li><a href="#">简述</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" href="#" data-toggle="dropdown">特点
                <span class="caret"></span>
              </a>
              <!--折叠菜单-->
              <ul class="dropdown-menu">
                <li><a href="#chrome">chrome</a></li>
                <li><a href="#firefox">firefox</a></li>
                <li><a href="#safari">safari</a></li>
                <li><a href="#opera">opera</a></li>
                <li><a href="#ie">ie</a></li>
              </ul>
            </li>
            <li><a class="btn" href="#mymodal" data-toggle="modal">关于</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!--轮播图-->
    <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
      <!--小圆点-->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
      </ol>
      <!-- 插入图片 -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="img-responsive" src="images/chrome-big.jpg" alt="chrome">
          <div class="carousel-caption">
            <h3>Chrome</h3>
            <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
             <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"                          role="button" target="_blank">点我下载</a></p>

          </div>
        </div>
        <div class="item">
          <img  class="img-responsive" src="images/firefox-big.jpg" alt="firefox">
          <div class="carousel-caption">
            <h3>firefox</h3>
            <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" role="button">点我下载</a></p>

          </div>
        </div>
        <div class="item">
          <img class="img-responsive" src="images/safari-big.jpg" alt="safari">
          <div class="carousel-caption">
            <h3>safari</h3>
            <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"
                          role="button">点我下载</a></p>

          </div>
        </div>
        <div class="item">
          <img class="img-responsive" src="images/opera-big.jpg" alt="opera">
          <div class="carousel-caption">
            <h3>opera</h3>
            <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"
                          role="button">点我下载</a></p>

          </div>
        </div>
        <div class="item">
          <img class="img-responsive" src="images/ie-big.jpg" alt="ie">
          <div class="carousel-caption">
            <h3>ie</h3>
            <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
             <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"
                          role="button">点我下载</a></p>

          </div>
        </div>
      </div>

      <!-- 上下翻页 -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一页</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一页</span>
      </a>
    </div>
    <!--三栏布局-->
    <div class="container text-center">
      <div class="row">
        <div class="col-md-4">
          <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome-logo">
          <h2>Chrome</h2>
          <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
          <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
          <img class="img-circle" src="images/firefox-logo-small.jpg" alt="firefox">
          <h2>Firefox</h2>
          <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
          <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>
        </div>
        <div class="col-md-4">
          <img class="img-circle" src="images/safari-logo-small.jpg" alt="safari">
          <h2>Safari</h2>
          <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
          <p><a class="btn btn-default" href="#" role="button">点我下载</a></p>

        </div>
      </div>
      <hr class="jianju">
    </div>
    <!--分页项目-->
    <div class="container">
       <!-- Nav tabs -->
      <ul class="nav nav-tabs"  id="tab-list" role="tablist">
        <li class="active"><a href="#chrome" data-toggle="tab">chrome</a></li>
        <li role="presentation"><a href="#firefox" data-toggle="tab">firefox</a></li>
        <li role="presentation"><a href="#safari" data-toggle="tab">safari</a></li>
        <li role="presentation"><a href="#opera" data-toggle="tab">opera</a></li>
        <li role="presentation"><a href="#ie" data-toggle="tab">ie</a></li>
      </ul>
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="chrome">
          <div class="media">
            <div class="media-body  media-middle">
              <h3 class="media-heading">Google Chrome <small><small>使用最广的浏览器</small></small></h3>              
                         
              <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
            </div>
            <div class="media-right">
              <a href="#" >
                <img class="media-object" src="images/chrome-logo.jpg" alt="chrome-logo">
              </a>
            </div>
            
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="firefox">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="images/firefox-logo.jpg" alt="firefox-logo">
              </a>
            </div>
            <div class="media-body  media-middle">
              <h3 class="media-heading">Mozilla Firefox <small><small>美丽的狐狸 </small></small></h3>                                       
              <p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
            </div>
            
            
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="safari">
           <div class="media">
            <div class="media-body  media-middle">
              <h3 class="media-heading">Safari Mac <small><small>用户首选</small></small></h3>              
                         
              <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
            </div>
            <div class="media-right">
              <a href="#">
                <img class="media-object" src="images/safari-logo.jpg" alt="safari-logo">
              </a>
            </div>
            
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="opera">
          <div class="media">
            <div class="media-left media-middle">
              <a href="#">
                <img class="media-object" src="images/opera-logo.jpg" alt="opera-logo">
              </a>
            </div>
            <div class="media-body  media-middle">
              <h3 class="media-heading">Opera <small><small>小众但易用 </small></small></h3>              
                         
              <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
            </div>
            
            
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="ie">
          <div class="media">
            <div class="media-body  media-middle">
              <h3 class="media-heading">IE <small><small>你懂的 </small></small></h3>              
                         
              <p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
            </div>
            <div class="media-right">
              <a href="#">
                <img class="media-object" src="images/ie-logo.jpg" alt="ie-logo">
              </a>
            </div>
            
          </div>
        </div>
      </div>
    </div>
    <!--modal框-->
    <div class="modal fade" tabindex="-1" role="dialog" id="mymodal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">关于</h4>
          </div>
          <div class="modal-body">
            <p>慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神， 将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button>
            
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!--页尾部分-->
    <footer class="container">
      <p>© 2014 慕课网<span class="pull-right"><a href="#">回到顶部</a></span></p>
    </footer>

    
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
      $(document).ready(function(){
        $("#mynavbar .dropdown-menu a").on("click",function(){
          var href=$(this).attr("href");
          console.log(href);
          $("#tab-list a[href='"+href+"']").tab("show")
        })
      })
    </script>
  </body>
</html>
